<template>
  <div class="app-container">
    <el-form
      :show-message="!($route.query.isInfo || isInfo)"
      ref="elForm"
      :disabled="$route.query.isInfo || isInfo"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="150px"
    >
      <h2 style="text-align: center">应急预案评估报告</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="演练预案" prop="reservePlan">
            <el-select
              :disabled="$route.query.isEdit"
              value-key="safeAccidentDrillItemId"
              v-model="reservePlan"
              @change="changeReservePlan"
              placeholder="请选择演练预案"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in planList"
                :key="index"
                :label="item.reservePlan"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="演练时间" prop="planTime">
            <el-date-picker
              :disabled="true"
              v-model="formData.planTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择演练时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="演练地点" prop="place">
            <el-input
              :disabled="true"
              v-model="formData.place"
              placeholder="请输入演练地点"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="演练负责人" prop="estimateUserId">
            <UserDialog
              :disabled="true"
              v-model="formData.estimateUserId"
              @change="changeUserhostId"
            ></UserDialog>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="参加人员" prop="joinUserId">
            <UserDialogSelection
              :disabled="true"
              @change="changeUser"
              placeholder="请选择参加人员"
              v-model="formData.joinUserId"
            ></UserDialogSelection>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-col :span="8"> -->
      <el-form-item label="附件" prop="attachment">
        <FileUpload v-model="formData.attachment"></FileUpload>
      </el-form-item>

      <el-col :span="24">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>
  
<script>
import { deptTreeSelect } from "@/api/system/user";

import { safeAccidentDrillItemRecord } from "@/api/secure/assessment.js";
import {
  safeAccidentDrillItemRecordSignAdd,
  safeAccidentDrillItemRecordSignEdit,
  safeAccidentDrillItemRecordSignInfo
} from "@/api/secure/signln.js";
// import { selectList as selectListplan } from "@/api/quality/manageAudit/plan.js";
export default {
  components: {},
  dicts: ["sys_practice_method"],
  data() {
    return {
      planList: [],
      formData: {
        place: undefined,
        deptId: undefined,
        planTime: null,
        finishDate: null,
        checkUserId: undefined,
        result: undefined,
        remark: undefined,
        reservePlan: undefined
      },
      year: "",
      reservePlan: "",
      deptOptions: [],
      deptIdShow: false,
      rules: {
        reservePlan: [
          {
            required: true,
            message: "请选择演练预案",
            trigger: "change"
          }
        ],
        place: [
          {
            required: true,
            message: "请输入演练地点",
            trigger: "blur"
          }
        ],
        deptId: [
          {
            required: true,
            message: "请选择责任部门",
            trigger: "change"
          }
        ],
        planTime: [
          {
            required: true,
            message: "请选择演练时间",
            trigger: "change"
          }
        ],
        finishDate: [
          {
            required: true,
            message: "请选择完成日期",
            trigger: "change"
          }
        ],
        checkUserId: [
          {
            required: true,
            message: "请选择验证人",
            trigger: "blur"
          }
        ],
        result: [
          {
            required: false,
            message: "请输入验证结果及完成时间",
            trigger: "blur"
          }
        ],
        remark: [
          {
            required: false,
            message: "请输入备注",
            trigger: "blur"
          }
        ]
      },
      deptName: "",
      deptId: ""
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getDeptTree();
    this.safeAccidentDrillItemRecord();
    // this.getPlan();
  },
  mounted() {},
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
        if (
          this.$route.query.isEdit ||
          this.$route.query.isInfo ||
          this.isInfo
        ) {
          this.getinfo();
        }
      });
    },
    safeAccidentDrillItemRecord() {
      safeAccidentDrillItemRecord({ type: 1 }).then(response => {
        this.planList = response.rows;
      });
    },
    changeReservePlan(e) {
      console.log(e);
      this.formData = e;
      this.$set(this.formData, "estimateUserId", e.leaderId);
      this.$set(
        this.formData,
        "joinUserId",
        e.joinUserId.split(",").map(Number)
      );
      this.$set(this.formData, "joinUserName", e.joinUserName.split(","));
      // this.formData.attachment = e.prepareWork
      this.formData.estimateUserName = e.leaderName;
      console.log(this.formData);
      this.$forceUpdate();
    },
    changeUser(e) {
      console.log(e);
      let idList = [];
      let nameList = [];
      e.forEach(i => {
        idList.push(i.userId);
        nameList.push(i.nickName);
      });
      console.log(idList, "idList");
      this.formData.joinUserId = idList.toString();
      this.formData.joinUserName = nameList.toString();
    },
    changeCascader(e) {
      console.log(this.$refs.reference.getCheckedNodes());
      let arr = this.$refs.reference.getCheckedNodes();
      let list = [];
      let label = [];
      arr.forEach((item, index) => {
        list.push(item.value);
        label.push(item.label);
        console.log(item.value);
      });
      console.log(list);
      this.deptIdStringValue = list.toString();
      this.deptIdStringLabel = label.toString();
      console.log(this.deptIdStringValue, this.deptIdStringLabel);
      this.deptIdShow = true;
    },
    visibleChange(e) {},
    changeUserhostId() {},
    getinfo() {
      safeAccidentDrillItemRecordSignInfo(this.$route.query.id || this.id).then(
        response => {
          this.formData = response.data;
          this.reservePlan = this.formData.reservePlan;
        }
      );
    },
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          query.styleLabel = this.dict.type.sys_practice_method.find(
            i => i.value === query.styleId
          ).label;
          query.joinUserId = query.joinUserId.toString();
          query.joinUserName = query.joinUserName.toString();
          if (
            this.formData.safeAccidentDrillItemRecordEstimateId != undefined
          ) {
            safeAccidentDrillItemRecordSignEdit(query).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            safeAccidentDrillItemRecordSignAdd(query).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    }
  }
};
</script>
  